<template>
  <div class="Sub2">
    <p>近期最受欢迎</p>
    <ul class="most">
      <li v-for="(item ,index) in daiyin.coming"  :key="index">
        <div class="img" ><img :src="item.img" ></div>
        <div class="name">{{item.nm}}</div>
        <div class="wish">{{item.wish}}人想看</div>
        <div class="time">{{item.comingTitle}}</div>
      </li>
    </ul>

    <div class="Sub3">
    <p>2022年 &nbsp;待定</p>
    <ul class="more">
      <li v-for="(item ,index) in waiting.coming"  :key="index">
        <div class="imgs"><img :src="item.img" ></div>
      <div class="center">
        <div class="nm">{{item.nm}}</div>
        <div class="star">主演：{{item.star}}</div>
      </div>
      <div class="right">
        <div class="wishs">{{item.wish}}人想看</div>
        <button class="buy" @click="toWish(item.id)">预售</button>
        </div>
      </li>
    </ul>
    </div>
    <div class="dianzi"></div>
    </div>

</template>

<script>

export default {
    data(){
      return{
        daiyin:{},
        waiting:{},
      }
    },
    created(){
        this.getlis()
        this.getwait()
    },
    methods:{
      getlis(){
        this.axios.get("index/mostExpected").then((re)=>{
          console.log("re===> 123" , re)
          this.daiyin = re
        })
      },
      getwait(){
        this.axios.get("index/comingList").then((re)=>{
          console.log("re===>" , re)
          this.waiting = re
        })
      },
      toWish(id){
        this.$router.push( `/wishview/${id}` )
      },
    }
}

</script>

<style >
.Sub2{
  background-color:white;
}
.Sub2 p{
  padding: 5px 10px;
  color: black;
}
.most{
  display: flex;
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  color: dimgray;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
}
.most li{
  width: 110px;
  padding: 0 14px;
}
img{
  width: 100px;
  height: 131px;
}
.most li{
  flex-wrap: wrap;
} 

*{
  margin: 0;
  padding: 0;
}
.more{
  width: 100%;
  height: 100%;
  /* display: flex;
  justify-content: space-around; */
  
}
.more li{
  display: flex;
  padding: 0 3%;
  margin-top: 10px;
}
.more li .imgs{
  flex:1;
}
.more li .center{
  flex:4;
  display: inline;
  line-height: 25px;
  justify-content: space-around;
  margin-left: 8px;
}
.more .nm{
  color: dimgrey;
  font-size:20px ;
  font-weight: bold;
}
.more .star{
  font-size: 13px;
  
}
.more li .right{
  flex:5;
  float: right;
}
.more .wishs{
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 19px;
  color: chocolate;
  font-size: 20px;
  font-weight: bold;
  float: right;
  padding: 2px 0 8px;
  text-align: center;

}
.more .buy{
  background-color:rgb(120, 177, 223);
  color:white;
  border-radius: 10px;
  padding: 5px 5px;
  margin-left: 50px;
}
.Sub3{
  margin-top:8px ;
  background-color:white;
}
.Sub3 p{
  padding: 5px 5px;
  font-size: 15px;
}
</style>